<template>
  <div class="top-bar">
    <div class="cells">
      <el-badge is-dot class="item">
        <el-button class="share-button" :icon="Bell" link />
      </el-badge>
    </div>
    <div class="user-info">
      <el-avatar :size="36" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
      <div class="txt">admin</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Bell } from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.top-bar {
  display: flex;
  justify-content: flex-end;
  padding: 11px 0;
  .cells {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24px;
    .el-icon {
      font-size: 24px;
    }
  }
  .user-info {
    display: flex;
    align-items: center;
    .txt {
      margin-left: 12px;
    }
  }
}
</style>
